<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mesto</title>
    <!-- <link rel="stylesheet" href="./pages/index.css"> -->
  </head>

  // Body
  <body class="page">
    <div class="page__content">
      <header class="header page__section">
        <img
          src="<%=require('./images/logo.svg')%>"
          alt="Логотип проекта место"
          class="logo header__logo"
        />
      </header>
      <main class="content">
        <section class="profile page__section">
          <div class="profile__image"></div>
          <!--  style="background-image: url(<%=require(`./images/avatar.jpg`)%>)" -->
          <div class="profile__info">
            <h1 class="profile__title">D Timofeev</h1>
            <button class="profile__edit-button" type="button"></button>
            <p class="profile__description">Frontend Developer</p>
          </div>
          <button class="profile__add-button" type="button"></button>
        </section>
        <section class="places page__section">
          <ul class="places__list"></ul>
        </section>
      </main>
      <footer class="footer page__section">
        <p class="footer__copyright">© 2024 Mesto Russia by Dmitry Timofeev</p>
      </footer>

      // Modals
      <div class="popup popup_type_edit popup_is-animated">
        <div class="popup__content">
          <button type="button" class="popup__close"></button>
          <h3 class="popup__title">Редактировать профиль</h3>
          <form class="popup__form" name="edit-profile" novalidate>
            <input
              id="name-input"
              pattern="^[a-zA-Zа-яА-ЯёЁ\s\-]+$"
              data-error-message="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы"
              type="text"
              name="name"
              class="popup__input popup__input_type_name"
              placeholder="Имя"
              minlength="2"
              maxlength="40"
              required
            />
            <span class="name-input-error popup__input_type_error"></span>
            <input
              id="description-input"
              type="text"
              name="description"
              class="popup__input popup__input_type_description"
              placeholder="Занятие"
              minlength="2"
              maxlength="200"
              required
            />
            <span
              class="description-input-error popup__input_type_error"
            ></span>
            <button type="submit" class="button popup__button">
              Сохранить
            </button>
          </form>
        </div>
      </div>
      <div class="popup popup_type_new-card popup_is-animated">
        <div class="popup__content">
          <button type="button" class="popup__close"></button>
          <h3 class="popup__title">Новое место</h3>
          <form class="popup__form" name="new-place" novalidate>
            <input
              id="place-input"
              pattern="^[a-zA-Zа-яА-ЯёЁ\s\-]+$"
              data-error-message="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы"
              type="text"
              name="place-name"
              class="popup__input popup__input_type_card-name"
              placeholder="Название"
              minlength="2"
              maxlength="30"
              required
            />
            <span class="place-input-error popup__input_type_error"></span>
            <input
              id="place-url-input"
              type="url"
              name="link"
              class="popup__input popup__input_type_url"
              placeholder="Ссылка на картинку"
              required
            />
            <span class="place-url-input-error popup__input_type_error"></span>
            <button type="submit" class="button popup__button">
              Сохранить
            </button>
          </form>
        </div>
      </div>
      <div class="popup popup_type_image popup_is-animated">
        <div class="popup__content popup__content_content_image">
          <button type="button" class="popup__close"></button>
          <img src="" alt="" class="popup__image" />
          <p class="popup__caption"></p>
        </div>
      </div>
    </div>

    <div class="popup popup_type-avatar popup_is-animated">
      <div class="popup__content">
        <button class="popup__close" type="button"></button>
        <h3 class="popup__title">Обновить аватар</h3>
        <form class="popup__form" name="avatar-form">
          <input
            type="url"
            name="avatar"
            id="place-url-input"
            class="popup__input popup__input_type_url"
            placeholder="Ссылка на картинку"
            required
          />
          <span class="place-url-input-error popup__input_type_error"></span>
          <button type="submit" class="button popup__button">Сохранить</button>
        </form>
      </div>
    </div>
    <!-- <script src="./scripts/cards.js"></script>
<script src="./index.js" defer></script> -->

    // Template
    <template id="card-template">
      <li class="places__item card">
        <img class="card__image" src="" alt="" />
        <button type="button" class="card__delete-button"></button>
        <div class="card__description">
          <h2 class="card__title"></h2>
          <div class="like-element">
            <button type="button" class="card__like-button"></button>
            <span class="like-button__count">0</span>
          </div>
        </div>
      </li>
    </template>
  </body>
</html>
